<template>
    <div id="userMoney">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <ul class="tab">
            <li :class="{active:tab==0}" @click="changeTab(0)">
                <span>红包列表</span>
            </li>
            <li :class="{active:tab==1}"  @click="changeTab(1)">
                <span>红包专区</span>
            </li>
        </ul>
        <div class="tabCon" v-if="tab==0">
            <scroll class="more-list" ref="scroll" 
            :data="list" 
            :scrollY="scrollY" 
            :scrollX="scrollX"
            :bounce="bounce" 
            :pullup="pullup" 
            @scrollToEnd="_getMoreList">
                <div class="banner">
                    <div class="text" @click="showModal">
                        红包使用规则<i class="icon iconfont">&#xe601;</i>
                    </div>
                </div>
                <div class="container" v-if="list.length!==0">
                    <div class="packet-list" v-for="(item,index) in list" :key="index" @click="goGameDetail(item.gameId)">
                        <template  v-if="item.is_stint!==1">
                            <div class="packetMsg">
                                <div class="packet-l">
                                    <div class="name">{{item.redName}}</div>
                                    <div class="time">
                                        <!-- {{item.create_time | filtertimestamp}} -->
                                        有效期至{{item.effect_end_time | filtertimestamp2}}
                                    </div>
                                </div>
                                <div class="packet-r" :class="{active:item.is_used==0}">
                                    <span class="num">{{item.money|moneyFilter}}</span>
                                    元
                                </div>
                            </div>
                            <div class="validity">
                                <!-- 有效期：{{item.effect_start_time | filtertimestamp2}}至{{item.effect_end_time | filtertimestamp2}} -->
                                满{{item.recharge}}元的充值订单可用
                                <span v-if="item.is_used==0">
                                    去使用
                                    <i class="icon iconfont">&#xe601;</i>
                                </span>
                            </div>
                            <span class="packet-expire-icon" v-if="item.is_used==2">   
                            </span>
                            <span class="packet-used-icon" v-if="item.is_used==1"></span>
                        </template>
                        <template v-else-if="item.is_stint==1">
                            <div class="packetMsg">
                                <div class="packet-l">
                                    <div class="name">无门槛红包</div>
                                    <div class="time">
                                       永久有效
                                    </div>
                                </div>
                                <div class="packet-r" :class="{active:item.is_used==0}">
                                    <span class="num">{{item.money|moneyFilter}}</span>
                                    元
                                </div>
                            </div>
                             <div class="validity">
                                <!-- 有效期：{{item.effect_start_time | filtertimestamp2}}至{{item.effect_end_time | filtertimestamp2}} -->
                                <span></span>
                                <span v-if="item.is_used==0">
                                    去使用
                                    <i class="icon iconfont">&#xe601;</i>
                                </span>
                            </div>
                            <span class="packet-expire-icon" v-if="item.is_used==2">   
                            </span>
                            <span class="packet-used-icon" v-if="item.is_used==1"></span>
                        </template>
                    </div>
                </div>
                    <!-- 没有数据 -->
                <noData  :title="'暂无红包记录'" v-else></noData>
            </scroll>
        </div>
        <div class="tabCon" v-if="tab==1">
            <scroll class="more-list" ref="scroll" 
            :data="list" 
            :scrollY="scrollY" 
            :scrollX="scrollX"
            :bounce="bounce" 
            :pullup="pullup" 
            @scrollToEnd="_getMoreList">
                <div class="game-list">
                    <div class="game-list-wrap">
                        <div class="list-wrap" v-for="item in list" :key="item.id">
                            <div class="item" @click="goDetail(item)">
                                <div class="avator">
                                    <img v-lazy="item.game_icon" alt="">
                                </div>
                                <div class="info">
                                    <div class="desc">
                                    <div class="game_msg">
                                        <div class="name">{{item.gamename}}</div>
                                        <div class="type">{{item.game_type}}</div>
                                    </div>
                                    <div class="label clearfix">
                                        <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                                        <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                                    </div>
                                    </div>
                                    <div class="down">
                                        <span>申请返利</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </scroll>
        </div>
        <van-popup v-model="show" class="modal">
            <div class="content">
                <div class="top">
                    <i class="icon iconfont" @click="closeModal">&#xe60e;</i>
                    红包使用规则
                </div>
                <div class="content-wrapper" v-html="rule">
                    
                </div>
            </div>
        </van-popup>
            <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="list.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import {packetList,packetArea,rule} from 'api/game_box'
    import {formatDate} from 'js/date'
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList"
    import Scroll from "common/scroll"
    import noData from "common/noData"
    export default {
        data(){
            return{
                title:'我的红包',
                tab:0,
                show:false,
                page:1,
                list:[],
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                showLoading:true,
                row: true,     //loading文字水平显示
                rule:""
            }
        },
        created(){
            this.init();
        },
        filters:{
             filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            filtertimestamp2(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            },
            labelFilter(text){
                return text.substr(0,8);
            },
            moneyFilter(money){
                return  parseFloat(money).toFixed(2);
            }
        },
        methods:{
            init(){
                packetList(this.page).then(res=>{
                    if (res.data.error == 0) {
                        this.showLoading=false;
                        let totalPage=res.data.content.totalPage;
                        this.list=res.data.content.data;
                        this.total= res.data.content.total;
                        if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }else{
                        this.showLoading=false;
                        this.more = false;
                        this.isload=true;
                    }
                })
                rule().then(res=>{
                    if (res.data.error == 0) {
                      this.rule=res.data.content.use_rule;
                    }
                })
            },
            changeTab(num){
                this.tab=num;
                this.isload=false;
                this.list=[];
                this.page=1;
                this.more=true;
                this.showLoading=true;
                if(num==1){
                    packetArea(this.page).then(res=>{
                        if (res.data.error == 0) {
                            this.showLoading=false;
                            let totalPage=res.data.content.totalPage;
                            this.list=res.data.content.data;
                            this.total= res.data.content.total;
                            if(this.page==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                        }else{
                            this.showLoading=false;
                            this.more = false;
                            this.isload=true;
                        }
                    })
                }else{
                    this.init(); 
                }
            },
            closeModal(){
                this.show=false;
            },
            showModal(){
                this.show=true
            },
            _getMoreList(){
                if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                if(this.tab==0){
                     packetList(this.page).then(res=>{
                        if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.list = this.list.concat(res);
                            if(this.page==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                        }
                    })
                }else{
                    packetArea(this.page).then(res=>{
                        if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.list = this.list.concat(res);
                            if(this.page==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                        }
                    })
                }
            },
            goDetail(item) {
                let id=item.id;
                this.$router.push({
                    path: `/gameDetail/${id}`
                });
            },
            goGameDetail(id){
                if(id!==0){
                     this.$router.push({
                        path: `/gameDetail/${id}`
                    });
                }
            }
        },
        components:{
            navbar,
            Loading,
            Loadinglist,
            Scroll,
            noData
        }
    }
</script>

<style scoped lang="scss">
   @import '~styles/variable.scss';
   @import '~styles/mixins.scss';
    #userMoney{
        width: 7.5rem;
        margin:0 auto;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        overflow:scroll;
    }
    .placeholder{
        width:100%;
        height:1.6rem;
        // height:.8rem;
    }
    .tab{
        width: 7.5rem;
        position: fixed;
        top: 0.8rem;
        left:50%;
        transform: translateX(-50%);
        z-index: 99;
        background: #fff;
        display:flex;
        height:0.8rem;
        line-height:0.8rem;
        font-size:$font-size-l;
        border-bottom:1px solid #ddd;
        li{
            flex:1;
            text-align: center;
            &.active{
                color:$color-focus;
                span{
                    display:inline-block;
                    height:100%;
                    border-bottom: 0.06rem solid $color-focus;
                }
            }
        }
    }
    .tabCon{
        .banner{
            position:relative;
            margin-top:0.15rem;
            width:100%;
            height:2rem;
            background-size:100% 100%;
            @include bg-image('../../assets/image/pic_hbgz');
            .text{
                position:absolute;
                bottom:0.6rem;
                left:0.86rem;
                color:#fff;
                font-size:0.36rem;
                i{
                    margin-left:0.04rem;
                    color:#fff;
                    font-size:0.32rem;
                }
            }
        }
        .container{
            margin:0.3rem auto;
            width:7rem;
            padding:0.26rem 0;
            background:#f7a365;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            .packet-list{
                position: relative;
                margin:0 auto 0.2rem auto;
                padding:0.3rem;
                width:6.6rem;
                height:2rem;
                background-size:100% 100%;
                @include bg-image('../../assets/image/ui_quan');
                .packetMsg{
                    display: flex;
                    justify-content: space-between;
                    .name{
                        margin-bottom:0.1rem;
                        font-size:$font-size-l;
                    }
                    .packet-r{
                        color:#a0a0a0;
                        .num{ 
                            font-size:28px;
                        }
                        &.active{
                            color:#fb4f41;
                        }
                    }
                }
                .validity{
                    display: flex;
                    justify-content: space-between;
                    margin-top:0.34rem;
                    span{
                       color:#fb4f41; 
                       .icon{
                           font-size:.24rem;
                       }
                    }
                }
                .packet-expire-icon{
                    position:absolute;
                    bottom:0.05rem;
                    right:0.1rem;
                    width:1.15rem;
                    height:1.05rem;
                    background-size:100% 100%;
                    @include bg-image('../../assets/image/pic_ygq');
                }
                .packet-used-icon{
                    position:absolute;
                    bottom:0.05rem;
                    right:0.1rem;
                    width:1.15rem;
                    height:1.05rem;
                    background-size:100% 100%;
                    @include bg-image('../../assets/image/pic_ysy');
                }
            }
        }
    }
    .game-list{
         padding: 0 0.4rem;
         .item {
            display: flex;
            min-height: 1.75rem;
            margin-top: 0.22rem;
            .avator {
            img {
                width: 1.6rem;
                height: 1.6rem;
            }
            }
            .info {
                flex: 1;
                margin-left: 0.16rem;
                display: flex;
                justify-content: space-between;
                padding-bottom: 0.22rem;
                border-bottom: 1px solid #f2f2f2;
            .desc {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .name{
                font-size:$font-size-m;
                }
                .type {
                color: #8e8d93;
                }
                .label{
                margin-top:0.1rem;
                span{
                    float: left;
                    padding: 0.02rem 0.06rem;
                    color: #fff;
                    margin: 0.02rem;
                    border-radius: 4px;
                    font-size:9px;
                }
                }
            }
            .down {
                margin-top:0.2rem;
                width: 1.2rem;
                height: 1.2rem;
                font-size: 0.3rem;
                color: $color-block;
                border: 1px solid $color-block;
                border-radius: 0.6rem;
                display:flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                span{
                    width: .8rem;
                }
            }
            }
            &.item-type1{
            padding: 0 0.4rem;
            }
        }
    }
    .modal{
        .content{
            width:7rem;
            margin:0 auto;
            .top{
                position: relative;
                height:0.86rem;
                line-height:0.86rem;
                text-align: center;
                font-size:$font-size-l;
                color:$color-focus;
                border-bottom:1px solid #f2f2f2;
                .icon{
                    position: absolute;
                    top:0;
                    left:0.2rem;
                    padding:0 0.2rem;
                    font-size:0.4rem;
                    color:#333;
                }
            }
            .content-wrapper{
                padding:0.36rem 0.5rem;
                font-size:$font-size-m;
                p{
                    margin-bottom:0.2rem;
                }
            }
        }
    }
</style>